<template>
  <div>
    <table-page :compTableData="compTableData" :columns="columns" :columnsType="columnsType" :currentPage="currentPage"
    :pageSize="pageSize" :total="total" @sizeChange="handleSizeChange"
    @selectionChange="handleSelectiontChange"  @currentChange="handleCurrentChange"
    @rowClick="rowClick" @cellClick="cellClick" @cellMouseLeave="cellMouseLeave" @cellMouseEnter="cellMouseEnter">
      <template prop="sex" slot="sex" slot-scope="scoped">
        <span>{{ scoped.row.sex | textBySex }}</span>
      </template>
      <template prop="operation" slot="operation" slot-scope="scoped">
        <el-button type="text" size="small" @click.native.stop="handleClick">编辑</el-button>
        <el-button type="text" size="small" @click.native.stop="handleDel">删除</el-button>
      </template>
    </table-page>
  </div>
</template>

<script>
import TablePage from "@/components/common/TablePage";
export default {
  name: "StudentList4",
  components: { TablePage },
  filters: {
    textBySex(value) {
      return value&&value == 1 ? "男" : "女";
    },
  },
  data() {
    return {
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableData: [],
      columnsType: {
        type: "selection",
      },
      columns: [
        {
          prop: "name",
          label: "姓名",
        },
        {
          prop: "age",
          label: "年龄",
        },
        {
          prop: "sex",
          label: "性别",
          template: true,
        },
        {
          prop: "operation",
          label: "操作",
          width: 110,
          template: true,
        },
      ],
    };
  },
  methods: {
    // 鼠标进入单元格事件
    cellMouseEnter(val){
      console.log('鼠标进入单元格事件',val);
    },
    // 鼠标离开单元格事件
    cellMouseLeave(val){
      console.log('鼠标离开单元格事件',val);
    },
    // 单元格点击事件
    cellClick(val){
      console.log('单元格点击事件',val);
    },
    rowClick(val){
       console.log('单击事件',val);
    },
    // 选中 不选中
    handleSelectiontChange(selects){
      console.log('selects2222',selects);
    },
    // 处理第几页 
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      // this.getList();
    },
    // 每页显示多少条   前端分页 不要执行刷新表格数据的方法 
    handleSizeChange(pageSize) {
      this.currentPage = 1;
      this.pageSize = pageSize;
      //this.getList();
    },
    handleClick() {
      this.$message.info("编辑");
    },
    handleDel() {
      this.$message.info("删除");
    },
    // 获取表格数据
    getList() {
      //let tables = [];
      for (let index = 0; index < 100; index++) {
        const obj = {
          id: index,
          name:'姓名'+index,
          sex: Math.random() < 0.5 ? 0 : 1,
          age: Math.floor(Math.random() * 10) + "岁",
        };
        if(Object.values(obj).every(itemValue => itemValue !== '')){
            //tables.push(obj);
            this.tableData.push(obj)
        }
      }
      this.tableData[2] = {}
      console.log('tableData2222',this.tableData[2]);
      this.tableData[0].name = ''
      this.tableData[1].age = ''
      this.tableData[6].name = ''
      // concat 合并数组/值  Array.concat(arr/val)  原数组不变  只能合并一维数组 二维数组不做处理
      //this.tableData = [].concat(this.tableData, tables);  // getList执行一次 新数组数据会在原数组 上增加100条
      this.total = this.tableData.length;
    },
  },
  created() {
    this.getList();
  },
  computed:{
    compTableData(){
         return this.tableData.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  }
};
</script>
